<template>
    <teleport to="body">
        <div class="modal fade show" v-if="visible" style="display: block; background-color: rgba(0, 0, 0, 0.5)" @click.self="handleCancel">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content" :class="[theme.isDark ? 'bg-dark text-light' : '']">
                    <div class="modal-body text-center px-4 py-4">
                        <!-- 图标区 -->
                        <div class="mb-3 fs-1 text-warning">
                            <i :class="icon"></i>
                        </div>

                        <!-- 标题 -->
                        <h5 class="fw-bold mb-2">{{ title }}</h5>

                        <!-- 内容 / 插槽 -->
                        <div class="mb-4">
                            <slot>
                                <p>{{ content }}</p>
                            </slot>
                        </div>

                        <!-- 按钮 -->
                        <div class="d-flex flex-column flex-sm-row gap-2">
                            <button class="btn btn-outline-secondary flex-fill" @click="handleCancel">
                                {{ cancelText }}
                            </button>
                            <button :class="['btn', confirmDanger ? 'btn-danger' : 'btn-primary', 'flex-fill']" @click="handleConfirm">
                                {{ confirmText }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </teleport>
</template>

<script setup>
import { ref } from 'vue';
import { useThemeStore } from '../store/theme';

const props = defineProps({
    title: String,
    content: String,
    icon: {
        type: String,
        default: 'bi bi-exclamation-circle-fill' // 默认警告图标
    },
    confirmText: {
        type: String,
        default: '确定'
    },
    cancelText: {
        type: String,
        default: '取消'
    },
    confirmDanger: {
        type: Boolean,
        default: false
    },
    onResolve: Function
});

const visible = ref(true);
const theme = useThemeStore();

const handleConfirm = () => {
    props.onResolve?.(true);
    visible.value = false;
};

const handleCancel = () => {
    props.onResolve?.(false);
    visible.value = false;
};
</script>

<style scoped>
.modal-body p {
    margin-bottom: 0;
}
</style>
